<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
			</div>
			<el-form-item label="小区ID" prop="blcok">
				<el-select v-model="queryParams.blcok" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="收费日期起" prop="qDate1">
				<el-date-picker v-model="queryParams.qDate1" type="date" value-format="yyyy-MM-dd"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<!-- <el-form-item label="收费日期止" prop="lastModifyTime2">
				<el-date-picker v-model="queryParams.lastModifyTime2" type="date" value-format="yyyy-MM-dd"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item> -->
		</el-form>
		<el-table v-loading="loading" :data="list" show-summary border height="calc(100vh - 320px)">
			<el-table-column label="序号" type="index" width="50">
			</el-table-column>
			<el-table-column label="小区名称" align="center" prop="blockName"></el-table-column>
			<el-table-column label="累计收费金额" align="center" prop="price" sortable></el-table-column>
			<el-table-column label="小区编码" align="center" prop="blcok"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		sfSelectReport
	} from '@/api/wuye.js'
	export default {
		name: "dangrishoufei",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					blcok: '',
					qDate1: this.getTodayDate(),
				},
				loading: false,
				list: [],
				total: '',
				options: [{
					value: '花园01',
					label: '花园01'
				}, {
					value: '嘉园02',
					label: '嘉园02'
				}, {
					value: '东苑03',
					label: '东苑03'
				}, {
					value: '景园04',
					label: '景园04'
				}, {
					value: '田园05',
					label: '田园05'
				}, {
					value: '新城06',
					label: '新城06'
				}, {
					value: '南苑07',
					label: '南苑07'
				}],
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			// 合计
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = 'N/A';
					}
				});
				return sums;
			},
			// 当天年月日
			getTodayDate() {
				const today = new Date();
				let date = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today
					.getDate()).slice(-2);
				return date;
			},
			//初始化列表
			getList() {
				this.loading = false;
				sfSelectReport({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},
		}

	}
</script>
<style scoped lang='scss'>

</style>